<!--业务新增-->
<template>
  <div
    v-loading.body="loading"
    class="app-container"
    :style="{height:loading?'100vh':''}"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(255, 255, 255, 0.8)"
  >
    <div class="save-busi-btn">
      <el-button
        v-if="sourceFrom==='orderList'&&submitBtn"
        class="filter-item right-btn"
        type="primary"
        icon="el-icon-download"
        @click="submitRefer"
      >
        提交征信
      </el-button>
      <el-button
        v-else
        class="filter-item right-btn"
        type="primary"
        icon="el-icon-plus"
        @click="createOrder"
      >
        新增
      </el-button>
    </div>
    <el-form
      ref="mainForm"
      :model="formData"
      :rules="orderRules"
      size="mini"
      class="editForm"
      label-width="100px"
    >
      <!--表单项-->
      <el-divider
        content-position="left"
        class="part-title"
      >
        主贷人信息
      </el-divider>
      <el-row class="part-box">
        <el-col :span="8">
          <el-form-item
            label="业务编号"
            class="car-form-item"
          >
            <el-input
              v-model="formData.orderId"
              disabled
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="业务区域"
            required
            prop="serviceArea"
            class="car-form-item"
          >
            <el-input
              v-model="formData.serviceArea"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="证件类型"
            required
            class="car-form-item"
          >
            <el-select
              v-model="mainUser.certType"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in IdCardType"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
            <!--            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入"/>-->
          </el-form-item>
          <el-form-item
            label="证件有效期至"
            required
            class="car-form-item"
          >
            <el-date-picker
              v-model="mainUser.certEndTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              class="car-modal-col"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item
            label="银行卡号"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.bankNum"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="汽车价格"
            required
            prop="carPrice"
            class="car-form-item"
          >
            <el-input
              v-model.number="formData.carPrice"
              type="number"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="部门"
            required
            prop="serviceGroup"
            class="car-form-item"
          >
            <el-select
              v-model="formData.serviceGroup"
              placeholder="请选择"
              clearable
              class="car-modal-col"
              @change="groupChange"
            >
              <el-option
                v-for="item in groupListData"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>

            <!--            <el-select v-model="formData.serviceGroup" placeholder="请选择" clearable class="car-modal-col">-->
            <!--              <el-option :value="mineStatus" style="height: auto">-->
            <!--                <el-tree :data="groupListData" default-expand-all show-checkbox check-strictly node-key="id"-->
            <!--                         ref="tree" highlight-current :props="defaultProps"-->
            <!--                         ></el-tree>-->
            <!--              </el-option>-->
            <!--            </el-select>-->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="业务关系"
            required
            prop="serviceType"
            class="car-form-item"
          >
            <el-select
              v-model="formData.serviceType"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="(item, num) in serviceData"
                v-if="num===0"
                :key="item.label"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="客户姓名"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.customerName"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="证件号码"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.certNum"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="身份证住址"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.certAddr"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="购车类型"
            required
            prop="buyType"
            class="car-form-item"
          >
            <el-select
              v-model="formData.buyType"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in carTypes"
                :key="item.value"
                :label="item.label"
                :value="item.label"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="进件类型"
            required
            prop="importType"
            class="car-form-item"
          >
            <el-select
              v-model="formData.importType"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in importTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="业务员"
            required
            prop="serviceUser"
            class="car-form-item"
          >
            <el-select
              v-model="formData.serviceUser"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in authUserData"
                :key="item"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="查征银行"
            required
            class="car-form-item"
          >
            <el-select
              v-model="mainUser.checkBank"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in banks"
                :key="item.id"
                :label="item.bankName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            label="手机号"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.phoneNum"
              type="tel"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="证件有效期始"
            required
            class="car-form-item"
          >
            <el-date-picker
              v-model="mainUser.certStartTime"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="date"
              class="car-modal-col"
              placeholder="选择日期"
            />
          </el-form-item>
          <el-form-item
            label="发证机关"
            required
            class="car-form-item"
          >
            <el-input
              v-model="mainUser.certOffice"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="汽车品牌"
            class="car-form-item"
          >
            <el-input
              v-model="formData.carBrand"
              class="car-modal-col"
              placeholder="请输入"
            />
          </el-form-item>
          <el-form-item
            label="签约方式"
            required
            prop="signType"
            class="car-form-item"
          >
            <el-select
              v-model="formData.signType"
              placeholder="请选择"
              clearable
              class="car-modal-col"
            >
              <el-option
                v-for="item in signTypeData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <br>
      <br>
      <!--表单项-->
      <el-divider
        content-position="left"
        class="part-title"
      >
        主贷人附件
      </el-divider>
      <el-row class="part-box">
        <el-upload
          action="#"
          class="upload-box"
          list-type="picture-card"
          :auto-upload="false"
        >
          <i
            slot="default"
            class="el-icon-plus"
          />
          <div
            slot="file"
            slot-scope="{file}"
          >
            <img
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt=""
            >
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in" />
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
              >
                <i class="el-icon-download" />
              </span>
              <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
              >
                <i class="el-icon-delete" />
              </span>
            </span>
          </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img
            width="100%"
            :src="dialogImageUrl"
            alt=""
          >
        </el-dialog>
      </el-row>
    </el-form>
    <div class="part-title-box">
      <div class="part-tip">
        征信人信息
      </div>
    </div>
    <el-button
      class="filter-item right-btn"
      type="primary"
      icon="el-icon-plus"
      @click="newDialog=true"
    >
      新增
    </el-button>
    <ve-table
      :columns="columns"
      :table-data="tableData"
      row-key-field-name="id"
      :border-x="true"
      :border-y="true"
      :row-style-option="rowStyleOption"
      :checkbox-option="checkboxOptipon"
    />
    <!--征信人弹框-->
    <el-dialog
      class="lnk-dialog"
      :close-on-click-modal="false"
      title="新增征信人"
      top="10vh"
      width="90%"
      :visible.sync="newDialog"
      :append-to-body="true"
    >
      <div class="dialog-app-container app-container">
        <el-form
          ref="mainForm"
          :model="referUser"
          :rules="rules"
          size="mini"
          class="editForm"
          label-width="100px"
        >
          <!--表单项-->
          <br>
          <br>
          <el-divider
            content-position="left"
            class="part-title"
          >
            主贷人信息
          </el-divider>
          <el-row class="part-box">
            <el-col :span="8">
              <el-form-item
                label="客户姓名"
                required
                prop="customerName"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.customerName"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="业务区域"
                required
                prop="serviceArea"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.serviceArea"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="证件类型"
                required
                prop="certType"
                class="car-form-item"
              >
                <el-select
                  v-model="referUser.certType"
                  placeholder="请选择"
                  clearable
                  class="car-modal-col"
                >
                  <el-option
                    v-for="item in IdCardType"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
                <!--            <el-input v-model="formData.nickName" class="car-modal-col" placeholder="请输入"/>-->
              </el-form-item>
              <el-form-item
                label="证件有效期至"
                required
                prop="certEndTime"
                class="car-form-item"
              >
                <el-date-picker
                  v-model="referUser.certEndTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  class="car-modal-col"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item
                label="银行卡号"
                required
                prop="bankNum"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.bankNum"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="汽车价格"
                required
                prop="carPrice"
                class="car-form-item"
              >
                <el-input
                  v-model.number="referUser.carPrice"
                  type="number"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="业务关系"
                required
                prop="serviceType"
                class="car-form-item"
              >
                <el-select
                  v-model="referUser.serviceType"
                  placeholder="请选择"
                  clearable
                  class="car-modal-col"
                >
                  <el-option
                    v-for="(item,order) in serviceData"
                    v-if="order!==0"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="进件类型"
                required
                prop="importType"
                class="car-form-item"
              >
                <el-select
                  v-model="referUser.importType"
                  placeholder="请选择"
                  clearable
                  class="car-modal-col"
                >
                  <el-option
                    v-for="item in importTypeData"
                    :key="item.id"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="证件号码"
                required
                prop="certNum"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.certNum"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="身份证住址"
                required
                prop="certAddr"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.certAddr"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="购车类型"
                required
                prop="buyType"
                class="car-form-item"
              >
                <el-select
                  v-model="referUser.buyType"
                  placeholder="请选择"
                  clearable
                  class="car-modal-col"
                >
                  <el-option
                    v-for="item in carTypes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.label"
                  />
                </el-select>
              </el-form-item>

              <el-form-item
                label="个人年收入(万)"
                required
                prop="annualIncome"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.annualIncome"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="查征银行"
                required
                prop="checkBank"
                class="car-form-item"
              >
                <el-select
                  v-model="referUser.checkBank"
                  placeholder="请选择"
                  clearable
                  class="car-modal-col"
                >
                  <el-option
                    v-for="item in banks"
                    :key="item.id"
                    :label="item.bankName"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="手机号"
                required
                prop="phoneNum"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.phoneNum"
                  type="tel"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="证件有效期始"
                required
                prop="certStartTime"
                class="car-form-item"
              >
                <el-date-picker
                  v-model="referUser.certStartTime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  type="date"
                  class="car-modal-col"
                  placeholder="选择日期"
                />
              </el-form-item>
              <el-form-item
                label="发证机关"
                required
                prop="certOffice"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.certOffice"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
              <el-form-item
                label="汽车品牌"
                class="car-form-item"
              >
                <el-input
                  v-model="referUser.carBrand"
                  class="car-modal-col"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <br>
          <br>
          <!--表单项-->
          <el-divider
            content-position="left"
            class="part-title"
          >
            主贷人附件
          </el-divider>
          <el-row class="part-box">
            <el-upload
              action="#"
              class="upload-box"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i
                slot="default"
                class="el-icon-plus"
              />
              <div
                slot="file"
                slot-scope="{file}"
              >
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-row>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer"
          align="center"
          style="margin-top: 15px"
        >
          <el-button @click="newDialog = false">
            取消
          </el-button>
          <el-button
            type="primary"
            @click="addNewPartnerData()"
          >
            保存
          </el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import { getRoutes } from '@/api/role'

const DB_DATA = []
import commonService from '../../../utils/common-date'
import { Loading } from 'element-ui'

export default {
  data() {
    return {
      loading: false,
      submitBtn: true, // 提交征信按钮
      rules: {
        serviceArea: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certEndTime: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        bankNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceGroup: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceUser: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        carPrice: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        importType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certAddr: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        buyType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        annualIncome: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        checkBank: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        phoneNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certStartTime: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certOffice: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        carBrand: [{ required: true, message: '字段不能为空', trigger: 'blur' }]
      }, // 校验规则
      orderRules: {
        signType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceArea: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certEndTime: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        bankNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceGroup: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        serviceUser: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        carPrice: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        customerName: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        importType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certAddr: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        buyType: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        annualIncome: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        bankLoanId: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        phoneNum: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certStartTime: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        certOffice: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        carBrand: [{ required: true, message: '字段不能为空', trigger: 'blur' }],
        number: [{ type: 'number', message: '必须为数字值', trigger: 'blur' }]
      }, // 订单新建校验规则
      IdCardType: [{ id: 1, name: '身份证' }, { id: 2, name: '军官证' }, { id: 3, name: '港澳台通行证' }], // 证件类型
      carTypes: [{ value: 0, label: '新车' }, { value: 1, label: '二手车' }], // 车辆类型
      serviceData: [{ value: 0, label: '主贷人' }, { value: 1, label: '担保人' }, { value: 2, label: '配偶' }], // 车辆类型
      importTypeData: [
        { id: 1, name: '电子签约', value: '' },
        { id: 2, name: '影像件签约', value: '' }
      ], // 进件方式
      banks: [], // 银行
      signTypeData: [], // 签约方式
      authUserData: [], // 用户
      groupListData: [], // 部门数据
      referUser: {}, // 征信人表单
      userList: [],
      defaultProps: {
        children: [],
        label: []
      },
      newDialog: false,
      mainUser: {},
      formData: {},
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      // page index
      pageIndex: 1,
      // page size
      pageSize: 10,
      listQuery: {},
      rowStyleOption: { // 表格样式
        stripe: true, // 斑马纹
        hoverHighlight: true, // hover高亮
        clickHighlight: true // 点击行高亮
      },
      checkboxOptipon: {
        // 行选择改变事件
        selectedRowChange: ({ row, isSelected, selectedRowKeys }) => {
          console.log(row, isSelected, selectedRowKeys)
        },
        // 全选改变事件
        selectedAllChange: ({ isSelected, selectedRowKeys }) => {
          console.log(isSelected, selectedRowKeys)
        }
      },
      tableData: [], // 征信人列表
      columns: [
        {
          field: '',
          key: 'a',
          title: '序号',
          align: 'center',
          width: '120px'
        },
        { field: 'customerName', key: 'b', title: '客户姓名', align: 'center' },
        { field: 'serviceType', key: 'c', title: '业务关系', align: 'center' },
        { field: 'certType', key: 'd', title: '证件类型', align: 'center' },
        { field: 'certNum', key: 'e', title: '证件号码', align: 'center' },
        { field: 'phoneNum', key: 'f', title: '手机号', align: 'center' }
      ],
      sourceFrom: ''
    }
  },
  computed: {
    // total count
    totalCount() {
      return DB_DATA.length
    }
  },
  async created(res) {
    if (this.$route.query && this.$route.query.source === 'orderList') {
      this.sourceFrom = this.$route.query.source
      // this.formData.orderId = this.$route.query.id
      this.getBussinessDetail(this.$route.query.id)
    } else {
      this.initDatabase()
    }
  },
  methods: {
    /**
     * 提交征信
     * @author 余丽仙
     * @date 2021/7/5
     * @param e
     */
    async submitRefer() {
      this.loading = true
      // let param = {appId: await sessionStorage.getItem("appId")};
      const data = await this.$http.get('/flow/orders/submit/' + this.formData.id, '')
      if (data.code === 200) {
        this.$message({
          type: 'success',
          message: '提交成功'
        })
        this.submitBtn = false
        this.loading = false
      }
    },
    /**
     * 获取订单详情
     * @date 2021/7/5
     * @param e
     */
    async getBussinessDetail(id) {
      const data = await this.$http.get('/flow/orders/detail/' + id, {})
      if (data.code === 200) {
        this.formData = data.data.orders
        this.mainUser = data.data.mainUser
        this.tableData = data.data.authUsers
      }
    },
    /**
     * 新建征信人
     * @author 余丽仙
     * @date 2021/7/3
     */
    addNewPartnerData() {
      this.tableData.push(this.referUser)
      this.newDialog = false
      this.referUser = {}
    },
    /**
     * 部门选择
     * @date 2021/7/3
     * @param e
     */
    async groupChange(e) {
      this.authUserData = []
      this.$set(this.formData, 'serviceUser', '')
      console.log(e, this.groupListData, this.groupListData[e])
      const list = await this.groupListData.filter((item) => {
        return item.label === e
      })
      if (list.length === 1) this.authUserData = list[0].children
      console.log(this.authUserData)
    },
    /**
     * 校验数据
     * @date 2021/7/3
     */
    checkData() {

    },
    /**
     * 创建订单
     * @date 2021/7/1
     */
    async createOrder() {
      const that = this
      this.$refs['mainForm'].validate(async(valid) => {
        if (!valid) {
          // return false;
        }
      })
      const param = Object.assign(that.formData, {
        mainUser: that.mainUser,
        authUsers: that.tableData
      })
      this.loading = true
      const data = await that.$http.post('/flow/orders/create', param)
      if (data.code === 200) {
        this.loading = false
        this.$message({
          type: 'success',
          message: '新建成功'
        })
      } else {
        this.loading = false
        that.$message({
          type: 'info',
          message: data.error || data.msg
        })
      }
    },
    // page number change
    pageNumberChange(pageIndex) {
      this.pageIndex = pageIndex
    },

    // page size change
    pageSizeChange(pageSize) {
      this.pageIndex = 1
      this.pageSize = pageSize
    },

    /**
     * 初始化下拉列表
     * @date 2021/6/28
     */
    async initDatabase() {
      this.banks = await commonService.getBankAll()
      this.signTypeData = await commonService.getSignTypeAll()
      this.groupListData = await commonService.getGroupUserAll()
      const list = await this.dealDate(this.groupListData)
      this.groupListData = list
      const data = await this.$http.get('/flow/orders/orderId')
      if (data.code === 200) {
        this.$set(this.formData, 'orderId', data.data)
        // this.formData.orderId = data.data
      }
      console.log(this.groupListData)
    },
    async dealDate(data) {
      const list = []
      for (const item in data) {
        list.push({
          label: item,
          children: data[item]
        })
      }
      return list
    },
    secondDeal(data) {
      const k = []
      for (const j in data) {
        k.push({
          label: data[j]
        })
      }
      return k
    },
    handleRemove(file) {
      console.log(file)
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload(file) {
      console.log(file)
    }
  }
}
</script>
<style lang="scss" scoped>

.app-container {
  width: 95%;
  margin: 0 auto 0;

  .car-modal-col {
    width: 280px;
  }

  .save-busi-btn {
    overflow: hidden;
  }

  .btn-box {
    width: 100%;
    text-align: right;
    margin: 10px auto;
  }

  .part-title {
    margin: 0 0 0;
  }

  .right-btn {
    float: right;
    margin: 0 0 10px 0;
  }

  .part-box {
    padding: 20px 15px 0 0;
    border-left: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;

    .upload-box {
      margin-left: 10px;
      margin-bottom: 10px;
    }
  }

  .part-title-box {
    height: 35px;
    background-color: #ecf8ff;
    border-radius: 4px;
    border-left: 5px solid #50bfff;
    margin: 20px auto;
    text-align: center;

    .part-tip {
      font-size: 14px;
      text-align: center;
      line-height: 35px;

    }
  }
}

.dialog-app-container {
  width: 100%;
  margin: -60px auto 0;
}
</style>
